<template>
    <div class="project-list">
      <!-- 项目列表 -->
      <el-table 
        :data="paginatedProjects" 
        style="width: 100%;" 
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column label="项目封面图">
            <template #default="scope">
                <img :src="scope.row.photo">
            </template>
        </el-table-column>
        <el-table-column prop="synopsis" label="项目简介"></el-table-column>
        <el-table-column prop="amount" label="已收集到的资金"></el-table-column>
        <el-table-column prop="target" label="项目目标金额"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="100">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleChange(scope.row)">
                修改</el-button>
                <el-button link type="primary" size="small" @click="handleDetail(scope.row)">
                详情页</el-button>
                <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
                删除</el-button>
            </template>
        </el-table-column>
      </el-table>

      <!-- 修改项目对话框 -->
      <el-dialog title="修改项目" v-model="dialogVisible">
          <el-form :model="currentProject">
              <el-form-item label="项目名称">
                  <el-input v-model="currentProject.name"></el-input>
              </el-form-item>
              <el-form-item label="项目简介">
                  <el-input v-model="currentProject.synopsis"></el-input>
              </el-form-item>
              <!-- <el-form-item label="封面图链接">
                  <el-input v-model="currentProject.photo" placeholder="请输入图片链接"></el-input>
              </el-form-item> -->
              <el-form-item label="目标金额">
                  <el-input v-model="currentProject.target" type="number"></el-input>
              </el-form-item>
          </el-form>
          <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveChanges">确 定</el-button>
          </span>
      </el-dialog>
    <!-- 以下为分页 -->
      <el-pagination
              :total="myProjects.length"
              :page-size="queryDto.size"
              :current-page="queryDto.page"
              layout="prev, pager, next, ->,total"
              @current-change="handlePageChange"
          />
      <div style="margin-top: 20px">
          <el-button @click="handleAllDelete()">删除选中的项目</el-button>
      </div>
    </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex';

export default {
    data(){
        return{
            queryDto:{
                total:0,
                page:1,
                size:5,
            },
            selectedProjects: [],
            dialogVisible: false, // 控制对话框的显示
            currentProject: {} // 当前修改的项目
        }
    },
    computed: {
       ...mapState('MyProjects',['myProjects']),
    //    以下为分页计算属性
       paginatedProjects() {
           const start = (this.queryDto.page - 1) * this.queryDto.size;
           const end = start + this.queryDto.size;
           return this.myProjects.slice(start, end);
       }
    },
    methods: {
        ...mapActions('MyProjects', ['selectProject', 'deleteProjects', 'updateProject']),
        //弹出修改信息对话框
        handleChange(project) {
            this.currentProject = { ...project }; // 复制当前项目的信息
            this.dialogVisible = true; // 打开对话框
        },
        // 跳转到详情页
        handleDetail(project) {
            this.$router.push({path: '/projectDetail', query: {id: project.pid}});
        },
        // 删除当前项目
        handleDelete(project) {
            this.$confirm('确定要删除该项目吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteProjects(project.pid);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 删除选中的项目
        handleAllDelete() {
            if (this.selectedProjects.length === 0) {
                this.$message({
                    type: 'info',
                    message: '请选择要删除的项目'
                });
                return;
            }
            this.$confirm('确定要删除选中的项目吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteProjects(this.selectedProjects.join(','));
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.selectedProjects = [];
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 处理分页
        handlePageChange(page){
            this.queryDto.page = page;
        },
        handleSelectionChange(selection) {
            this.selectedProjects = selection.map(project => project.pid);
        },
        // 保存修改信息
        saveChanges() {
            const submit={
                pid: this.currentProject.pid,
                name: this.currentProject.name,
                synopsis: this.currentProject.synopsis,
                target: this.currentProject.target,
            }
            console.log("更新的信息：",submit);
            this.updateProject(submit); // 调用更新项目的方法
            this.dialogVisible = false; // 关闭对话框
            this.$message({
                type: 'success',
                message: '修改成功!'
            });
        }
    },
    mounted(){
        const uid = JSON.parse(localStorage.getItem('User')).userid;
        this.selectProject(uid);
    }
}
</script>

<style scoped>
img {
    width: 100px;
    height: 100px;
}
</style>
